<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>实习人员管理</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="addRole('add',0)">新增</el-button>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="success" icon="el-icon-folder-opened" @click="getExcel()">导入Excel</el-button>
          <!-- <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="warning" icon="el-icon-paperclip" @click="getSelected()">申请实习补贴</el-button>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="danger" icon="el-icon-coordinate" @click="getBuild()">申请基地建设奖励</el-button> -->
        </template>
      </PageTitle>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleClick">
        <el-menu-item index="0">全部</el-menu-item>
        <el-menu-item index="1">待审核</el-menu-item>
        <el-menu-item index="2">实习中</el-menu-item>
        <el-menu-item index="3">实习结束</el-menu-item>
        <el-menu-item index="4">审核驳回</el-menu-item>
      </el-menu>
      <!-- 搜索筛选 -->
      <el-row :gutter="10" style="margin-top:20px">
        <el-col :span="3">
          <el-input v-model="query.name" type="text" placeholder="输入姓名" />
        </el-col>
        <el-col :span="3">
          <el-input v-model="query.phone" type="text" placeholder="输入手机号" />
        </el-col>
        <el-col :span="4">
          <el-input v-model="query.sub_name" type="text" placeholder="输入身份证号" />
        </el-col>
        <el-col :span="4">
          <el-input v-model="query.school" type="text" placeholder="输入学校" />
        </el-col>
        <el-col :span="3">
          <el-select v-model="query.type" placeholder="选择学历" clearable @clear="() => { query.type=undefined } ">
            <el-option v-for="item in query_qualification" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="query.status" placeholder="是否留用" clearable @clear="() => { query.status=undefined } ">
            <el-option v-for="item in statusData" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:20px">
        <el-col :span="3.5">
          <el-date-picker
            v-model="query.created_start"
            type="datetime"
            placeholder="实习开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width:100%"
          />
        </el-col>
        <el-col :span="3.5">
          <el-date-picker
            v-model="query.created_end"
            type="datetime"
            placeholder="实习开始时间截止"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width:100%"
          />
        </el-col>
        <el-col :span="3.5">
          <el-date-picker
            v-model="query.createtime_s"
            type="datetime"
            placeholder="实习结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-col>
        <el-col :span="3.5">
          <el-date-picker
            v-model="query.createtime_e"
            type="datetime"
            placeholder="实习结束时间截止"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width:100%"
          />
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" ooltip-effect="dark" border :data="list" max-height="450px" style="margin-top: 20px;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="ID" align="center" sortable width="60" prop="id" />
        <el-table-column label="姓名" align="center" prop="full_name" />
        <el-table-column label="手机号码" align="center" prop="phone" width="130" />
        <el-table-column label="在读学校" align="center" prop="school" width="180" />
        <el-table-column label="学历" align="center" prop="qualification">
          <template slot-scope="{row}">
            {{ row.qualification|qualificationType }}
          </template>
        </el-table-column>
        <el-table-column label="实习岗位" align="center" prop="position" />
        <el-table-column label="状态" align="center" prop="qualification">
          <template slot-scope="{row}">
            <el-tag :type="row.status_z|statusFilter">
              {{ row.status_z|statusZState }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="实习开始时间" align="center" prop="start_at" width="160">
          <template slot-scope="{row}">
            {{ row.start_at|timeStanpYYMMDD }}
          </template>
        </el-table-column>
        <el-table-column label="实习结束时间" align="center" prop="end_at" width="160">
          <template slot-scope="{row}">
            {{ row.end_at|timeStanpYYMMDD }}
          </template>
        </el-table-column>
        <el-table-column label="留用状态" align="center" prop="status">
          <template slot-scope="{row}">
            {{ row.status|formIsUrl }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" width="200" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="addRole('edit',row)">查看/审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-row type="flex" align="middle" style="margin-left: 20px;">
      <el-pagination background layout="sizes,total,prev,pager,next" :total="count" :page-sizes="[10, 20, 50, 100]" :page-size="query.limit" :current-page="query.page" @current-change="changPage" @size-change="handleSizeChange" />
    </el-row>
    <!-- 添加 -->
    <el-dialog :visible="showDialog" title="新增" top="40px" @close="btnCanle">
      <div class="shopOrder-dialog">
        <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="150px">
          <el-form-item label="姓名" prop="full_name">
            <el-input v-model="formData.full_name" style="width: 50%;" :placeholder="$t('table.enterThe')+'姓名'" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="formData.phone" style="width: 50%;" :placeholder="$t('table.enterThe')+'手机号'" />
          </el-form-item>
          <el-form-item label="有效身份证" prop="id_card">
            <el-input v-model="formData.id_card" style="width: 50%;" :placeholder="$t('table.enterThe')+'有效身份证'" />
          </el-form-item>
          <el-form-item label="身份证正面" prop="id_card_left">
            <ImageUpload ref="idCardLeftPhoto" />
          </el-form-item>
          <el-form-item label="身份证反面" prop="id_card_right">
            <ImageUpload ref="idCardRightPhoto" />
          </el-form-item>
          <el-form-item label="学校类型" prop="school_type">
            <el-radio-group v-model.number="formData.school_type">
              <el-radio :label="1">国内</el-radio>
              <el-radio :label="2">国外</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="formData.school_type===1" label="学校所在城市">
            <el-select v-model="formData.province" :placeholder="$t('table.selectThe')+'省份'" style="margin-right: 10px;" @change="provincedata">
              <el-option v-for="(item,index) in provinceList" :key="index" :label="item.fullname" :value="item.fullname" />
            </el-select>
            <el-select v-model="formData.city" :placeholder="$t('table.selectThe')+'城市'" @change="citydata">
              <el-option v-for="(item,index) in city" :key="index" :label="item.fullname" :value="item.fullname" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="formData.school_type===2" label="学校所在国家" prop="province">
            <el-input v-model="formData.province" style="width: 50%;" :placeholder="$t('table.enterThe')+'学校所在国家'" />
          </el-form-item>
          <el-form-item label="在读学校" prop="school">
            <el-select v-model="formData.school" filterable placeholder="请选择在读学校" :filter-method="customFilter" style="width:50%" @blur="handleBlur" @change="handleChange">
              <el-option v-for="item in filteredOptions" :key="item.id" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="学历" prop="qualification">
            <el-select v-model.number="formData.qualification" placeholder="请选择学历">
              <el-option v-for="item in qualification" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="学历证书" prop="qualification_img">
            <ImageUpload ref="qualificationImgPhoto" />
          </el-form-item>
          <el-form-item label="在读证明材料" prop="prove">
            <ImageUpload ref="provePhoto" />
          </el-form-item>
          <el-form-item label="实习岗位" prop="position">
            <el-input v-model="formData.position" style="width: 50%;" :placeholder="$t('table.enterThe')+'实习岗位'" />
          </el-form-item>
          <el-form-item label="开户银行" prop="bank">
            <el-input v-model="formData.bank" style="width: 50%;" :placeholder="$t('table.enterThe')+'开户银行'" />
          </el-form-item>
          <el-form-item label="银行账号" prop="bank_no">
            <el-input v-model="formData.bank_no" style="width: 50%;" :placeholder="$t('table.enterThe')+'银行账号'" />
          </el-form-item>
          <el-form-item label="银行卡照片" prop="bank_img">
            <ImageUpload ref="bankImgPhoto" />
          </el-form-item>
          <el-form-item label="留用状态" prop="status">
            <el-radio-group v-model.number="formData.status">
              <el-radio :label="3">未知</el-radio>
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="formData.status===1" label="留用证明" prop="status_img">
            <ImagesListUpload ref="statusImgPhoto" />
          </el-form-item>
          <el-form-item label="实习开始时间" prop="start_at">
            <el-date-picker v-model.number="formData.start_at" editable type="date" placeholder="实习开始时间" format="yyyyMMdd" value-format="timestamp" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="btnOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 导入Excel -->
    <el-dialog v-loading="downloadLoading" title="导入Excel" :visible="showDialogS" top="40px" @close="btnCanleS">
      <div class="shopOrder-dialog">
        <div class="fujian-box">
          <label>下载附件：</label>
          <div class="a-top item-xbox">
            <div class="item-fujian d-j-a" @click="dowBtn(imgUrl)">
              <div class="item-img">
                <img v-if="imgUrl.name=='.pdf'" src="https://lxw.nbblmc.cn//file/jintaiimg/PDF.png">
                <img v-if="imgUrl.name=='.xlsx'||imgUrl.name=='.xls'||imgUrl.name=='.csv'" src="https://lxw.nbblmc.cn/file/jintaiimg/excel.png">
                <img v-if="imgUrl.name=='.doc'||imgUrl.name=='.docx'" src="https://lxw.nbblmc.cn/file/jintaiimg/word.png">
              </div>
              <div class="item-title">{{ imgUrl.url|getFileName }}</div>
            </div>
          </div>
        </div>
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :http-request="UploadFile"
          :file-list="fileList"
          multiple
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传xlsx,xls文件，且不超过500kb</div>
        </el-upload>

      </div>
    </el-dialog>
    <RightPanel ref="panel" :click-not-close="true" :width="75">
      <div class="base">
        <div class="logo"><img alt="" :src="user_data.avatar|avatarType"></div>
        <div class="info">
          <div class="title">
            <div class="name">{{ practice_user.full_name }}</div>
          </div>
          <div class="details">
            <el-row class="line">
              <el-col :span="8">
                <label class="line_label">实习企业：</label>
                <span class="text"> {{ company.companyname }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">实习岗位：</label>
                <span class="text"> {{ practice.position }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">人员状态：</label>
                <el-tag v-if="practice.status_z===1" type="info">待审核</el-tag>
                <el-tag v-if="practice.status_z===2" type="success">实习中</el-tag>
                <el-tag v-if="practice.status_z===3" type="danger">实习结束</el-tag>
                <el-tag v-if="practice.status_z===4" type="danger">审核驳回</el-tag>
              </el-col>
            </el-row>
            <el-row class="line">
              <el-col :span="8">
                <label class="line_label">实习开始时间：</label>
                <span class="text"> {{ practice.start_at|timeStanpYYMMDD }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">实习结束时间：</label>
                <span class="text"> {{ practice.end_at|timeStanpYYMMDD }} </span>
              </el-col>
              <el-col :span="8">
                <label class="line_label">留用状态：</label>
                <el-tag v-if="practice.status===3" type="info">未知</el-tag>
                <el-tag v-if="practice.status===1" type="success">是</el-tag>
                <el-tag v-if="practice.status===2" type="danger">否</el-tag>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="tab_box">
        <el-tabs v-model="activeName">
          <el-tab-pane label="个人资料" name="1">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">个人资料</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice_user" label-width="140px">
                        <el-form-item label="姓名" prop="full_name">
                          <el-input v-model="practice_user.full_name" style="width: 50%;" />
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                          <el-input v-model="practice_user.phone" style="width: 50%;" :placeholder="$t('table.enterThe')+'手机号'" />
                        </el-form-item>
                        <el-form-item label="有效身份证" prop="id_card">
                          <el-input v-model="practice_user.id_card" style="width: 50%;" />
                        </el-form-item>
                        <el-form-item label="学校类型" prop="school_type">
                          <el-radio-group v-model.number="practice_user.school_type">
                            <el-radio :label="1">国内</el-radio>
                            <el-radio :label="2">国外</el-radio>
                          </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="practice_user.school_type===1" label="学校所在城市">
                          <el-select v-model="practice_user.province" :placeholder="$t('table.selectThe')+'省份'" style="margin-right: 10px;" @change="provincedataS">
                            <el-option v-for="(item,index) in provinceList" :key="index" :label="item.fullname" :value="item.fullname" />
                          </el-select>
                          <el-select v-model="practice_user.city" :placeholder="$t('table.selectThe')+'城市'" @change="citydataS">
                            <el-option v-for="(item,index) in city" :key="index" :label="item.fullname" :value="item.fullname" />
                          </el-select>
                        </el-form-item>
                        <el-form-item v-if="practice_user.school_type===2" label="学校所在国家" prop="province">
                          <el-input v-model="practice_user.province" style="width: 50%;" :placeholder="$t('table.enterThe')+'学校所在国家'" />
                        </el-form-item>
                        <el-form-item label="在读学校" prop="school">
                          <el-select v-model="practice_user.school" filterable placeholder="请选择在读学校" :filter-method="customFilter" style="width:50%" @blur="handleBlur" @change="handleChange">
                            <el-option v-for="item in filteredOptions" :key="item.id" :value="item.name" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="学历" prop="qualification">
                          <el-select v-model.number="practice_user.qualification" placeholder="请选择学历">
                            <el-option v-for="item in qualification" :key="item.id" :label="item.name" :value="item.id" />
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </div>
                    <div class="btnOk-ljm">
                      <el-button v-if="practice_user.comid===practice.comid && practice.status_z>1" type="primary" @click="btnUser">确定保存修改</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="tables">
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice_user" label-width="140px">
                        <el-form-item label="身份证正面" prop="id_card_left">
                          <ImageUpload ref="idCardLeftPhoto1" />
                        </el-form-item>
                        <el-form-item label="身份证反面" prop="id_card_right">
                          <ImageUpload ref="idCardRightPhoto1" />
                        </el-form-item>
                        <el-form-item label="学历证书" prop="qualification_img">
                          <ImageUpload ref="qualificationImgPhoto1" />
                        </el-form-item>
                        <el-form-item label="在读证明材料" prop="prove">
                          <ImagesListUpload ref="provePhoto1" />
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="收款信息" name="2">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">银行卡信息</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice_user" label-width="100px">
                        <el-form-item label="开户银行" prop="bank">
                          <el-input v-model="practice_user.bank" style="width: 50%;" />
                        </el-form-item>
                        <el-form-item label="银行账号" prop="bank_no">
                          <el-input v-model="practice_user.bank_no" style="width: 50%;" />
                        </el-form-item>
                        <el-form-item label="银行卡" prop="bank_img">
                          <ImageUpload ref="bankImgPhoto1" />
                        </el-form-item>
                      </el-form>
                    </div>
                    <div class="btnOk-ljm">
                      <el-button v-if="practice_user.comid===practice.comid&&practice.status_z>1" type="primary" @click="btnUser">确定保存修改</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="实习信息" name="3">
            <div class="clientInfo_wrapper">
              <el-row>
                <el-col :span="13">
                  <div class="tables">
                    <div class="title_t">实习信息</div>
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice" label-width="100px">
                        <el-form-item label="实习岗位" prop="position">
                          <el-input v-model="practice.position" style="width: 50%;" :placeholder="$t('table.enterThe')+'实习岗位'" />
                        </el-form-item>
                        <el-form-item label="实习开始时间" prop="start_at">
                          <el-date-picker v-model.number="practice.start_at" editable type="date" placeholder="实习开始时间" format="yyyyMMdd" value-format="timestamp" />
                        </el-form-item>
                        <el-form-item label="实习结束时间" prop="end_at">
                          <el-date-picker v-model.number="practice.end_at" editable type="date" placeholder="实习结束时间" format="yyyyMMdd" value-format="timestamp" />
                        </el-form-item>
                        <el-form-item v-if="practice.status_z===3" label="实习时长" prop="duration">
                          <label style="color: #999999; margin-left:10px">{{ practice.duration }}个月</label>
                        </el-form-item>
                        <el-form-item label="留用状态" prop="status">
                          <el-radio-group v-model.number="practice.status">
                            <el-radio :label="3">未知</el-radio>
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                          </el-radio-group>
                        </el-form-item>
                      </el-form>
                    </div>
                    <div class="btnOk-ljm">
                      <el-button v-if="practice.status_z>1" type="primary" @click="btnPractice">确定保存修改</el-button>
                    </div>
                  </div>
                </el-col>
                <el-col :span="11">
                  <div class="tables">
                    <div class="table_content">
                      <el-form ref="ruleForm" :model="practice" label-width="100px">
                        <el-form-item label="实习佐证" prop="practice_img">
                          <ImagesListUpload ref="practiceImgPhoto" />
                        </el-form-item>
                        <el-form-item v-show="practice.status===1" label="留用证明" prop="status_img">
                          <ImagesListUpload ref="statusImgPhoto1" />
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div v-if="practice.status_z===1" class="btnFoot">
          <el-button type="danger" @click="rejectClick">审核驳回</el-button>
          <el-button type="primary" @click="reject(2,3,practice.comid)">审核通过</el-button>
        </div>
      </div>
    </RightPanel>
    <!-- 审核驳回 -->
    <el-dialog title="确认驳回" :visible="showDialogB" top="60px" @close="btnCanleB">
      <el-form ref="ruleForm" :model="formData" label-width="180px" :rules="rules">
        <el-form-item label="审核驳回意见" prop="installation_sum">
          <el-input v-model="content" type="textarea" :rows="5" style="width: 50%;" :placeholder="$t('table.enterThe')+'审核驳回意见'" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="btnCanleB">{{ $t('button.cancel') }}</el-button>
        <el-button type="danger" @click="reject(4,0,0)">确认驳回</el-button>
      </div>
    </el-dialog>
    <!-- 基地建设奖励 -->
    <el-dialog title="基地建设奖励" :visible="showBuild" top="60px" @close="btnCanleBuild">
      <el-form ref="ruleForm" :model="formDataS" label-width="180px" :rules="rules">
        <el-form-item label="申报年份" prop="installation_sum">
          <el-select v-model="formDataS.year" :placeholder="$t('table.selectThe')+'申报年份'" style="margin-right: 10px;">
            <el-option v-for="(item,index) in yearList" :key="index" :label="item.year" :value="item.year" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="btnCanleBuild">{{ $t('button.cancel') }}</el-button>
        <el-button type="success" @click="btnBuild">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetPracticeUser, AddPracticeUser, GetSchool, ExcelPracticeUser, GetAdminSet, GetPracticUserInfo, EditPracticeUser, EditPractice, PracticeUserReject, AddBaseInternship, BaseBuildModel, AddBaseBuild } from '@/api/user'
import user from '@/store/modules/user'
import province from '@/api/m_province'
import { validMobile, validIdCord } from '@/utils/validate'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'primary',
        3: 'warning',
        4: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    const validateMobile = (rule, value, callback) => {
      validMobile(value) ? callback() : callback(new Error(this.$t('prompt.phoneFormat')))
    }
    const validIdCordData = (rule, value, callback) => {
      validIdCord(value) ? callback() : callback(new Error('身份证格式不正确！'))
    }
    return {
      activeName: '1',
      activeIndex: '0',
      downloadLoading: false,
      list: [],
      count: 0,
      query_qualification: [
        { id: 0, name: '大专及以上' },
        { id: 1, name: '本科及以上' },
        { id: 2, name: '硕士及以上' },
        { id: 3, name: '博士' }
      ],
      qualification: [
        { id: 1, name: '大专' },
        { id: 2, name: '本科' },
        { id: 3, name: '硕士' },
        { id: 4, name: '博士' }
      ],
      statusData: [
        { id: 3, name: '未知' },
        { id: 1, name: '是' },
        { id: 2, name: '否' }
      ],
      query: {
        bid: undefined,
        jid: undefined,
        name: '',
        sub_name: '',
        status: undefined,
        type: undefined,
        created_start: '',
        created_end: '',
        createtime_s: '',
        createtime_e: '',
        school: '',
        phone: '',
        page: 1,
        limit: 10
      },
      showDialog: false,
      formData: {
        comid: undefined,
        city: '',
        id: undefined,
        full_name: '',
        province: '',
        school_type: 1,
        school: '',
        qualification: undefined,
        id_card_left: '',
        id_card_right: '',
        qualification_img: '',
        phone: '',
        bank: '',
        bank_no: '',
        bank_img: '',
        status: 0,
        status_img: '',
        start_at: undefined
      },
      rules: {
        full_name: [{ required: true, message: '姓名' + this.$t('prompt.noEmpty'), trugger: 'blur' }],
        position: [{ required: true, message: '实习岗位' + this.$t('prompt.noEmpty'), trugger: 'blur' }],
        id_card: [{ required: true, message: '有效身份证' + this.$t('prompt.noEmpty'), trugger: 'blur' }, { validator: validIdCordData, trugger: 'blur' }],
        school: [{ required: true, message: '在读学校' + this.$t('prompt.noEmpty'), trugger: 'blur' }],
        qualification: [{ required: true, message: '学历' + this.$t('prompt.noEmpty'), trigger: 'change' }],
        phone: [{ required: true, trigger: 'blur', message: this.$t('prompt.phoneEmpty') }, { validator: validateMobile, trigger: 'blur' }]
      },
      roleShowDialog: false,
      permData: [],
      defaultProps: {
        label: 'name'
      },
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      roleId: undefined, // 用来记录分配角色的id
      provinces: [],
      provinceList: [],
      city: [],
      school: [],
      value: '',
      inputValue: '',
      filteredOptions: [],
      showDialogS: false,
      adminInfo: {},
      imgUrl: { url: '', name: '' },
      fileList: [],
      practice: {},
      practice_user: {},
      user_data: {},
      company: {},
      showDialogB: false,
      content: '',
      multipleSelection: [],
      showBuild: false,
      formDataS: {
        year: ''
      },
      yearList: []
    }
  },
  watch: {
    value(newVal) {
      const selectedOption = this.school.find(option => option.id === newVal)
      this.inputValue = selectedOption ? selectedOption.name : newVal
    }
  },
  created() {
    this.query.bid = parseInt(user.state.userInfo.bid)
    this.formData.comid = parseInt(user.state.userInfo.bid)
    this.getInter()
    this.getProvince()
    this.getMenu()
    this.getYear()
  },
  methods: {
    // 申请建设奖励
    getBuild() {
      if (this.multipleSelection.length < 1) {
        this.$message.error('请先勾选符合条件的实习人员！')
        return
      }
      this.showBuild = true
    },
    async btnBuild() {
      const one = {
        base: { comid: parseInt(user.state.userInfo.bid) },
        show: [],
        year: this.formDataS.year
      }
      if (one.year === '' || one.year === undefined) {
        this.$message.error('请先选择申报年份！')
        return
      }
      for (const item of this.multipleSelection) {
        if (item.status_z !== 3) {
          this.$message.error(item.full_name + '的当前状态无法申请！')
          return
        }
        if (item.qualification < 2) {
          this.$message.error(item.full_name + '的学历不满足条件！')
          return
        }
        if (item.end_at < item.start_at) {
          this.$message.error(item.full_name + '的实习结束日期错误，请检查！')
          return
        }
        if (item.prove === '' || item.prove === undefined) {
          this.$message.error(item.full_name + '的在读证明材料不能为空！')
          return
        }
        if (item.practice_img === '' || item.practice_img === undefined) {
          this.$message.error(item.full_name + '的实习佐证不能为空！')
          return
        }
        if (item.status === 1) {
          if (item.status_img === '' || item.status_img === undefined) {
            this.$message.error(item.full_name + '的留用证明不能为空！')
            return
          }
        } else if (item.status === 3) {
          this.$message.error(item.full_name + '留用状态不明确!')
          return
        }

        one.show.push(item)
      }
      await AddBaseBuild(one)
      this.getEx(one.show)
      this.$router.push({ path: '/subsidy/baseBuild' })
    },
    // 获取补贴年份
    async getYear() {
      var param = {
        page: 1,
        limit: 100
      }
      const { list } = await BaseBuildModel(param)
      this.yearList = list
    },
    // 申请实习补贴
    async getSelected() {
      if (this.multipleSelection.length < 1) {
        this.$message.error('请先勾选符合条件的实习人员！')
        return
      }
      const one = {
        base: { comid: parseInt(user.state.userInfo.bid) },
        show: []
      }
      for (const item of this.multipleSelection) {
        if (item.status_z !== 3) {
          this.$message.error(item.full_name + '的当前状态无法申请！')
          return
        }
        if (item.qualification < 3) {
          this.$message.error(item.full_name + '的学历不满足条件！')
          return
        }
        if (item.is_baseintern_ship === 0) {
          this.$message.error(item.full_name + '已领取当年6个月的补贴！')
          return
        }
        if (item.end_at < 1703865600 || item.end_at < item.start_at) {
          this.$message.error(item.full_name + '的实习结束日期错误，请检查！')
          return
        }
        if (item.prove === '' || item.prove === undefined) {
          this.$message.error(item.full_name + '的在读证明材料不能为空！')
          return
        }
        if (item.practice_img === '' || item.practice_img === undefined) {
          this.$message.error(item.full_name + '的在实习佐证不能为空！')
          return
        }
        one.show.push(item)
      }
      await AddBaseInternship(one)
      this.getEx(one.show)
      this.$router.push({ path: '/subsidy/baseInternship' })
    },
    // 批量导出
    getEx(list) {
      const headers = {
        '序号': 'number',
        '姓名': 'full_name',
        '身份证号': 'id_card',
        '学校': 'school',
        '学历': 'qualification',
        '实习起始时间': 'start_at',
        '实习时长（个月）': 'duration'
      }
      const ordernum = []
      for (let i = 0; i < list.length; i++) {
        let qualification = '硕士'
        if (list[i].qualification === 3) {
          qualification = '硕士'
        } else if (list[i].qualification === 4) {
          qualification = '博士'
        } else if (list[i].qualification === 2) {
          qualification = '本科'
        }
        const start_at = this.YYMMDD(list[i].start_at)
        const one = {
          number: i + 1,
          full_name: list[i].full_name,
          id_card: list[i].id_card,
          school: list[i].school,
          qualification: qualification,
          start_at: start_at,
          duration: list[i].duration
        }
        ordernum.push(one)
      }
      const data = this.formatJson(headers, ordernum)
      // 导出Excel
      import('@/vendor/Export2Excel').then(excel => {
        // excel是引入文件的导出对象
        excel.export_json_to_excel({
          header: Object.keys(headers),
          data: data,
          filename: '北仑区大学生实习花名册'
        })
      })
    },
    // 将表头数据和数组进行对应
    formatJson(headers, rows) {
      return rows.map(item => {
        // item 是一个对象
        return Object.keys(headers).map(key => {
          return item[headers[key]]
        })
      })
    },
    YYMMDD(dataTime) {
      if (dataTime === undefined || dataTime === 0) { return }
      var time = 0
      if (String(dataTime).length >= 13) {
        time = dataTime
      } else {
        time = dataTime * 1000
      }
      const unixTimestamp = new Date(time)
      const commonTime = unixTimestamp.toLocaleString('en-GB', { hour12: false })
      const tim = commonTime.split('/')
      const year = tim[2].split(',')[0]
      const month = tim[1]
      const day = tim[0]
      if (time === '') {
        return ''
      } else {
        return year + '年' + month + '月' + day + '日'
      }
    },
    // 审核
    rejectClick() {
      this.showDialogB = true
    },
    // 审核
    async reject(e, c, b) {
      console.log(this.practice_user)
      const one = {
        id: this.practice.id,
        aid: e,
        cid: c,
        bid: b,
        name: this.content
      }
      const two = {
        id: this.practice.id,
        pid: this.practice_user.id
      }
      let title = '确定审核通过操作吗？'
      if (e === 2) {
        title = '确定审核通过操作吗？'
      } else {
        title = '确定审核驳回操作吗？'
      }
      try {
        await this.$confirm(title)
        await PracticeUserReject(one)
        this.getPracticeInfo(two)
        this.btnCanleB()
        this.getInter()
        this.$message.success('操作成功！')
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 修改实习信息
    async btnPractice() {
      try {
        // 读取上传组件的数据
        const fileList = this.$refs.practiceImgPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const practice_img = []
        for (let i = 0; i < fileList.length; i++) {
          practice_img.push(fileList[i].url)
        }
        this.practice.practice_img = practice_img.toString(',')

        // 读取上传组件的数据
        const fileList1 = this.$refs.statusImgPhoto1.fileList
        // 循环判断是否已经完成全部上传
        if (fileList1.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const status_img = []
        for (let i = 0; i < fileList1.length; i++) {
          status_img.push(fileList1[i].url)
        }
        this.practice.status_img = status_img.toString(',')

        if (this.practice.start_at > 0) {
          this.practice.start_at = this.practice.start_at / 1000
        }
        if (this.practice.end_at > 0) {
          this.practice.end_at = this.practice.end_at / 1000
        }
        await EditPractice(this.practice)
        this.$refs.panel.show = !this.$refs.panel.show
        this.getInter()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(this.$t('prompt.failed'))
      }
    },
    // 修改实习人资料
    async btnUser() {
      try {
        // 读取上传组件的数据
        const fileList = this.$refs.idCardLeftPhoto1.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const id_card_left = []
        for (let i = 0; i < fileList.length; i++) {
          id_card_left.push(fileList[i].url)
        }
        this.practice_user.id_card_left = id_card_left.toString(',')

        // 读取上传组件的数据
        const fileList1 = this.$refs.idCardRightPhoto1.fileList
        // 循环判断是否已经完成全部上传
        if (fileList1.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const id_card_right = []
        for (let i = 0; i < fileList1.length; i++) {
          id_card_right.push(fileList1[i].url)
        }
        this.practice_user.id_card_right = id_card_right.toString(',')

        // 读取上传组件的数据
        const fileList2 = this.$refs.qualificationImgPhoto1.fileList
        // 循环判断是否已经完成全部上传
        if (fileList2.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const qualification_img = []
        for (let i = 0; i < fileList2.length; i++) {
          qualification_img.push(fileList2[i].url)
        }
        this.practice_user.qualification_img = qualification_img.toString(',')
        // 读取上传组件的数据
        const fileListprove = this.$refs.provePhoto1.fileList
        // 循环判断是否已经完成全部上传
        if (fileListprove.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const prove = []
        for (let i = 0; i < fileListprove.length; i++) {
          prove.push(fileListprove[i].url)
        }
        this.practice_user.prove = prove.toString(',')
        // 读取上传组件的数据
        const fileList3 = this.$refs.bankImgPhoto1.fileList
        // 循环判断是否已经完成全部上传
        if (fileList3.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const bank_img = []
        for (let i = 0; i < fileList3.length; i++) {
          bank_img.push(fileList3[i].url)
        }
        this.practice_user.bank_img = bank_img.toString(',')

        await EditPracticeUser(this.practice_user)
        this.$refs.panel.show = !this.$refs.panel.show
        this.getInter()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(this.$t('prompt.failed'))
      }
    },
    // 获取实习人详情
    async getPracticeInfo(row) {
      this.activeName = '1'
      this.practice = {}
      this.practice_user = {}
      this.company = {}
      this.user_data = {}
      const one = {
        id: row.id,
        jid: row.pid
      }
      const { practice, practice_user, user_data, company } = await GetPracticUserInfo(one)
      this.practice = practice
      this.practice_user = practice_user
      this.company = company
      this.user_data = user_data
      if (practice_user.province !== '') {
        var cur = 0
        province.RECORDS.forEach(item => {
          if (item.fullname === practice_user.province && item.pid === 0) {
            cur = item.cid
          }
        })
        this.city = []
        province.RECORDS.forEach(item => {
          if (item.pid === (cur / 1000)) {
            this.city.push(item)
          }
        })
        this.getSchool(this.practice_user.province, this.practice_user.city)
      }
      if (practice.start_at > 0) {
        this.practice.start_at = this.practice.start_at * 1000
      } else {
        this.practice.start_at = undefined
      }
      if (practice.end_at > 0) {
        this.practice.end_at = this.practice.end_at * 1000
      } else {
        this.practice.end_at = undefined
      }
      this.openDialog()
    },
    // 获取系统设置
    async getMenu() {
      var param = {
        id: 1
      }
      const { list } = await GetAdminSet(param)
      this.adminInfo = list
      const endIndex = list.practice_form.lastIndexOf('.')
      const fileName = list.practice_form.substring(endIndex)
      this.imgUrl = { url: list.practice_form, name: fileName }
    },
    async dowBtn(row) {
      await this.$confirm('确定要下载该附件吗？')
      const a = document.createElement('a') // 创建一个a标签
      a.href = row.url // 设置a标签的href属性为临时URL
      a.click() // 模拟点击a标签进行下载
      this.$message.success('下载成功！')
    },
    // 上传
    async UploadFile(params) {
      this.downloadLoading = true
      try {
        const formData = new FormData()// 定义新的formData
        // 为formData赋值
        formData.append('file', params.file)
        // 发起上传请求
        const file = await ExcelPracticeUser(formData)
        // 循环数组，为对应的filelist中的url替换
        this.fileList = this.fileList.map(item => {
          if (item.uid === this.currentFileUid) {
            return { url: file.file, upload: true, name: file.name }
          }
          this.getUserAdmin()
          return item
        })
        this.downloadLoading = false
        this.$message.success('导入成功！')
        this.btnCanleS()
      } catch (error) {
        this.downloadLoading = false
        this.$message.error('导入失败！')
      }
    },
    getExcel() {
      this.showDialogS = true
    },
    // 保存选择对象
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    customFilter(query) {
      this.inputValue = query
      this.filteredOptions = this.school.filter(option => {
        return option.name && option.name.toLowerCase().includes(query.toLowerCase())
      })
    },
    handleBlur() {
      // 当失去焦点时检查是否有匹配的选项
      const hasMatch = this.filteredOptions.some(option =>
        option.name && option.name.toLowerCase() === this.inputValue.toLowerCase()
      )
      if (!hasMatch) {
        this.handleNoMatch(this.inputValue)
      }
    },
    handleChange(val) {
      const selectedOption = this.school.find(option => option.id === val)
      if (selectedOption) {
        // 如果用户选择了一个选项，则更新输入框的值为选项的 name
        this.inputValue = selectedOption.name
      }
    },
    handleNoMatch(val) {
      this.formData.school = val
      // 这里添加你的逻辑，例如将输入的值保存到数据库，作为参数传递给API等
    },
    citydata() {
      this.getSchool(this.formData.province, this.formData.city)
    },
    citydataS() {
      this.getSchool(this.practice_user.province, this.practice_user.city)
    },
    // 获取省份
    getProvince() {
      province.RECORDS.forEach(item => {
        if (item.pid === 0) {
          this.provinceList.push(item)
        }
      })
    },
    // 监听下拉
    provincedata(data) {
      var cur = 0
      province.RECORDS.forEach(item => {
        if (item.fullname === data && item.pid === 0) {
          cur = item.cid
        }
      })
      this.city = []
      province.RECORDS.forEach(item => {
        if (item.pid === (cur / 1000)) {
          this.city.push(item)
        }
      })
      this.getSchool(this.formData.province, this.formData.city)
    },

    // 监听下拉
    provincedataS(data) {
      var cur = 0
      province.RECORDS.forEach(item => {
        if (item.fullname === data && item.pid === 0) {
          cur = item.cid
        }
      })
      this.city = []
      province.RECORDS.forEach(item => {
        if (item.pid === (cur / 1000)) {
          this.city.push(item)
        }
      })
      this.getSchool(this.practice_user.province, this.practice_user.city)
    },
    handleClick(e) {
      this.query.jid = parseFloat(e)
      this.query.page = 1
      this.getInter()
    },
    // 获取学校列表
    async getSchool(province, city) {
      const one = {
        sub_name: province,
        phone: city,
        page: 1,
        limit: 1000
      }
      const { list } = await GetSchool(one)
      this.school = list
      this.filteredOptions = list
    },
    // 获取列表
    async getInter() {
      this.downloadLoading = true
      const { count, list } = await GetPracticeUser(this.query)
      this.count = count
      this.list = list
      this.downloadLoading = false
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getInter()
    },
    // 每页 条数
    handleSizeChange(val) {
      this.query.page = 1
      this.query.limit = parseInt(val)
      this.getInter()
    },
    // 打开新增编辑
    addRole(type, row) {
      if (type === 'add') {
        this.formData.name = ''
        this.formData.id = undefined
        this.formData.descr = ''
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      } else if (type === 'edit') {
        this.getPracticeInfo(row)
        this.$refs.panel.show = !this.$refs.panel.show
      }
    },
    // 确定提交
    async btnOk() {
      try {
        await this.$refs.ruleForm.validate()
        // 读取上传组件的数据
        const fileList = this.$refs.idCardLeftPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const id_card_left = []
        for (let i = 0; i < fileList.length; i++) {
          id_card_left.push(fileList[i].url)
        }
        this.formData.id_card_left = id_card_left.toString(',')

        // 读取上传组件的数据
        const fileList1 = this.$refs.idCardRightPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList1.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const id_card_right = []
        for (let i = 0; i < fileList1.length; i++) {
          id_card_right.push(fileList1[i].url)
        }
        this.formData.id_card_right = id_card_right.toString(',')

        // 读取上传组件的数据
        const fileList2 = this.$refs.qualificationImgPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList2.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const qualification_img = []
        for (let i = 0; i < fileList2.length; i++) {
          qualification_img.push(fileList2[i].url)
        }
        this.formData.qualification_img = qualification_img.toString(',')
        // 读取上传组件的数据
        const fileListprove = this.$refs.provePhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileListprove.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const prove = []
        for (let i = 0; i < fileListprove.length; i++) {
          prove.push(fileListprove[i].url)
        }
        this.formData.prove = prove.toString(',')
        // 读取上传组件的数据
        const fileList3 = this.$refs.bankImgPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList3.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const bank_img = []
        for (let i = 0; i < fileList3.length; i++) {
          bank_img.push(fileList3[i].url)
        }
        this.formData.bank_img = bank_img.toString(',')

        // 读取上传组件的数据
        const fileList4 = this.$refs.statusImgPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList4.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        const status_img = []
        for (let i = 0; i < fileList4.length; i++) {
          status_img.push(fileList4[i].url)
        }
        this.formData.status_img = status_img.toString(',')
        if (this.formData.start_at > 0) {
          this.formData.start_at = this.formData.start_at / 1000
        }
        await AddPracticeUser(this.formData)
        this.btnCanle()
        this.getInter()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(this.$t('prompt.failed'))
      }
    },
    // 取消弹窗驳回
    btnCanleB() {
      this.content = ''
      this.showDialogB = false
    },
    // 取消
    btnCanle() {
      this.formData = {
        comid: parseInt(user.state.userInfo.bid),
        city: '',
        id: undefined,
        full_name: '',
        province: '',
        school_type: 1,
        school: '',
        qualification: undefined,
        id_card_left: '',
        id_card_right: '',
        qualification_img: '',
        phone: '',
        bank: '',
        bank_no: '',
        bank_img: '',
        status: 2,
        status_img: '',
        start_at: undefined
      }
      this.$refs.idCardLeftPhoto.fileList = []
      this.$refs.idCardRightPhoto.fileList = []
      this.$refs.qualificationImgPhoto.fileList = []
      this.$refs.provePhoto.fileList = []
      this.$refs.bankImgPhoto.fileList = []
      this.$refs.statusImgPhoto.fileList = []
      this.showDialog = false
    },
    btnCanleS() {
      this.fileList = []
      this.showDialogS = false
    },
    btnCanleBuild() {
      this.formDataS = {
        year: ''
      }
      this.showBuild = false
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getInter()
    },
    // 给图片赋值
    openDialog() {
      if (this.practice_user.id_card_left) {
        const imgUrl = this.practice_user.id_card_left.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.idCardLeftPhoto1.fileList = NewArr
      } else {
        this.$refs.idCardLeftPhoto1.fileList = []
      }
      if (this.practice_user.id_card_right) {
        const imgUrl = this.practice_user.id_card_right.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.idCardRightPhoto1.fileList = NewArr
      } else {
        this.$refs.idCardRightPhoto1.fileList = []
      }
      if (this.practice_user.qualification_img) {
        const imgUrl = this.practice_user.qualification_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.qualificationImgPhoto1.fileList = NewArr
      } else {
        this.$refs.qualificationImgPhoto1.fileList = []
      }
      if (this.practice_user.prove) {
        const imgUrl = this.practice_user.prove.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.provePhoto1.fileList = NewArr
      } else {
        this.$refs.provePhoto1.fileList = []
      }
      if (this.practice_user.bank_img) {
        const imgUrl = this.practice_user.bank_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.bankImgPhoto1.fileList = NewArr
      } else {
        this.$refs.bankImgPhoto1.fileList = []
      }
      if (this.practice.status_img) {
        const imgUrl = this.practice.status_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.statusImgPhoto1.fileList = NewArr
      } else {
        this.$refs.statusImgPhoto1.fileList = []
      }
      if (this.practice.practice_img) {
        const imgUrl = this.practice.practice_img.split(',')
        const NewArr = []
        imgUrl.forEach(item => {
          const one = {
            url: item,
            upload: true
          }
          NewArr.push(one)
        })
        this.$refs.practiceImgPhoto.fileList = NewArr
      } else {
        this.$refs.practiceImgPhoto.fileList = []
      }
    }
  }
}
</script>
<style scoped lang="scss">
.shopOrder-dialog{
  height: auto;
  max-height: 600px;
  overflow-y: auto;
}
.fujian-box{
  padding-bottom: 50px;
  label{
    font-size: 15px;
    font-weight: bold;
  }
  .item-xbox{
    flex-wrap: wrap;
  }
  .item-fujian{
    margin-top: 20px;
    margin-right: 10px;
    width: 14%;
    flex-direction: column;
    .item-img{
      width: 70%;
      img{
        width: 100%;
      }
    }
  }
  .item-title{
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
  }
}
.base{
  padding: 20px 30px;
  display: flex;
  .logo{
    width: 118px;
    height: 118px;
    margin-right: 20px;
    background-color: #ebeef5;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    img{
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
  .info{
    flex: 1;
    .title{
      padding: 5px 0 18px;
      display: flex;
      .name{
        font-size: 20px;
        height: 20px;
        color: #303033;
        font-weight: 600;
        margin-right: 10px;
      }
      .user{
        padding-top: 6px;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        color: #777;
        .logoin{
          color: #0078ff;
          cursor: pointer;
        }
      }
      .qcc_box{
        width: 63px;
        height: 20px;
        position: absolute;
        right: 30px;
        z-index: 30;
        cursor: pointer;
        a{
          cursor: pointer;
          color: inherit;
          text-decoration: none;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .details{
      max-width: 100%;
      .line{
        margin-bottom: 15px;
        .line_label{
          color: #777;
          font-size: 14px;
          line-height: 14px;
          font-weight: 400;
        }
        .text{
          display: inline-block;
          font-size: 14px;
          line-height: 14px;
        }
        .text_color{
          color: #0078ff;
          cursor: pointer;
        }
      }
    }
  }
}
.bind_icon{
  display: inline-block;
  float: left;
  margin-right: 5px;
}
.tab_box{
  padding:0 30px;
}
.clientInfo_wrapper{
  height: calc(100vh - 246px);
    overflow-y: auto;
}
.tables{
  padding: 20px 0px;
}
  .title_t{
    font-weight: 700;
    font-size: 16px;
    margin-left: 20px;
  }
  .table_content{
    margin-top: 30px;
  }
  .img_box{
    margin-top: 30px;
  }
  .btnOk-ljm{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
  }
  .btnFoot{
    width: 100%;
    position:absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
